<template>
    <div>
      <Head :head="head" @greet="greet"></Head>
      <el-dialog
        :visible.sync="centerDialogVisible"
        width="1000px"
        center>
        <div class="left_essential base">
          <img src="/static/assets/img/dtx1.png" alt="">
          <p v-for="(c,index) in cs" @click="sorts($event, index, c.t)" v-bind:class="{'visible1':nowIndex == index}" :key="c.index">{{ c.name }}</p>
        </div>
        <div class="right_essential" v-if="temp1 == 1">
          <p>尊敬的{{user}}用户，胸痛质控大家庭感谢您的加入</p>
          <div><p><span>组织</span></p><p><span>个人资料</span></p></div>
          <div><p><span>头像</span><img src="/static/assets/img/logo.png" alt=""></p><p><span>姓名</span>{{user}}</p><p><span>头像</span><img src="/static/assets/img/dtx.png" alt=""></p></div>
          <div><p><span>权限</span>{{user}}</p><p><span>权限</span>{{user}}</p></div>
          <div><p><span>简称</span>{{user}}</p><p><span>职务</span>{{user}}</p><p><span>科室</span>{{user}}></p></div>
          <div><p></p><p><span>手机</span>{{user}}<span class="tip">已绑定</span></p><p><span>邮箱</span>{{user}}<span class="tip">已验证</span></p></div>
        </div>
        <div class="right_essential" v-if="temp1 == 2">
          <p>您的安全服务</p>
          <div><p><span class="width_user">用户名</span>{{user}}</p></div>
          <div><p><span>绑定邮箱</span></p><span class="tip2">修改邮箱</span></div>
          <div><p><span>绑定手机</span>{{user}}</p></div>
          <div><p><span>登录密码</span>{{user}}</p><span class="tip2">修改邮箱</span></div>
        </div>
        <div class="both"></div>
      </el-dialog>
      <el-container class="right_bgcolor">
        <div class="bgcolor" style="width: 100%;">
        <el-main>
          <el-row>
            <el-col :span="8">
              <div style="margin-top: 30px;height: 100px;border-bottom: 1px solid #cccccc;padding-right: 10px;">
                <el-row class="switch-list" data-index=0>
                  <el-col :span="3"><span :style="currentHospital == 0 ? 'margin-top: -5px;' : ''" :class="currentHospital == 0 ? 'vis1' : ''">江苏省</span></el-col>
                  <el-col :span="16" class="lls_a"><el-progress :text-inside="true" :stroke-width="18" :percentage="100" class="win"></el-progress></el-col>
                  <el-col :span="3"><img src="/static/assets/img/win.png" alt="" class="win_img"></el-col>
                  <el-col :span="2" class="win_color tc tr" >50例</el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">全国</el-col>
                  <el-col :span="13" class="lls_a"><el-progress :text-inside="true" :stroke-width="18" :percentage="70" class="rank_color"></el-progress></el-col>
                  <el-col :span="8" class="tc tr">40例</el-col>
                </el-row>
              </div>
              <div class="list" style="height:690px;overflow-y:scroll;">
                <el-row style="line-height: 40px;vertical-align: middle;" class="switch-list" data-index=3 :class="currentHospital == 3 ? 'vis1' : ''">
                  <el-col :span="4"><span><img src="/static/assets/img/first.png" alt=""></span>&nbsp;&nbsp;南京</el-col>
                  <el-col :span="13" class="lls_a" style="margin-top: 10px">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="100" class="wins"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">72</el-col>
                </el-row>
                <el-row class="switch-list" data-index=2>
                  <el-col :span="4"><span><img src="/static/assets/img/second.png" alt=""></span><span class="ml-5" :class="currentHospital == 2 ? 'vis1' : ''">无锡</span></el-col>
                  <el-col :span="13" class="lll lls_a" >
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="98" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">70</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span><img src="/static/assets/img/three.png" alt=""></span><span class="ml-5">徐州</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="88" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">60</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">4</span><span class="ml-10">常州</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="80" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">50</el-col>
                </el-row>
                <el-row class="switch-list" data-index=1>
                  <el-col :span="4"><span class="w-20">5</span><span class="ml-10" :class="currentHospital == 1 ? 'vis1' : ''">苏州</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="80" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">50</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">6</span><span class="ml-10">南通</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="55" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">45</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">7</span><span class="ml-10">连云港</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="51" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">42</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">8</span><span class="ml-10">淮安</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="50" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">40</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">9</span><span class="ml-10">盐城</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="49" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">38</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">10</span><span class="ml-10">扬州</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="47" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">35</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">11</span><span class="ml-10">镇江</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="46" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">32</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">12</span><span class="ml-10">泰州</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="46" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">32</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4"><span class="w-20">13</span><span class="ml-10">宿迁</span></el-col>
                  <el-col :span="13" class="lll lls_a">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="41" class="winsr"></el-progress>
                  </el-col>
                  <el-col :span="3" class="tr">26</el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="16" style="padding-left: 20px;border-left: 1px solid #cccccc;">
              <div style="height: 130px;">
                <div class="" style="height: 40px">
                  <!--<img v-for="img in images" :src="tempa?img.src:img.src1" alt="" v-on:click="qh(img.t)" class="fr" :key="img.index">-->
                  <el-form ref="form" :model="form" class="fr version">
                    <el-select v-model="form.region" placeholder="标准版" class="aaaa">
                      <el-option label="标准版" value="1"></el-option>
                      <hr>
                      <el-option label="基层版-PCI" value="2"></el-option>
                      <hr>
                      <el-option label="基层版-溶柱" value="3"></el-option>
                      <hr>
                      <el-option label="基层版-转运" value="4"></el-option>
                    </el-select>
                    <div class="position-relative width-23 top_qi" style="display: inline-block;height: 25px;line-height: 42px;">
                      <div @click="showAverage = !showAverage" class="clearfix full-width">
                        <div class="fr text-white">
                          <i class="el-icon-arrow-down el-icon--right rotate" :class="{'rotate-180':showAverage}"></i>
                        </div>
                        <div class="fr" :class="{'text-white': choosedAverage.type}">{{choosedText}}</div>
                      </div>
                      <div class="sub-tip" :class="{'sub-tip-show':showAverage}"></div>
                      <transition name="el-zoom-in-top">
                        <div class="bg-white of-hidden sub-card" v-show="showAverage">
                          <div class="border-bottom" v-for="(item,i) in averages" :key="i">
                            <div class="px-10 text-14 text-black-light py-7">
                              <div class="d-flex"
                                   :class="{'pt-7': j !== 0}"
                                   v-for="(subItem,j) in item.content" :key="j">
                                <div class="width-8" :class="{'line-height-40':subItem.type === 'year' || subItem.type === 'freeAverage'}">
                                  {{subItem.title}}
                                </div>
                                <div class="flex-full flex-wrap d-flex"
                                     :class="{'border-bottom pb-7': j !== item.content.length - 1}">
                                  <div v-for="(sub,k) in subItem.subs" :key="k"
                                       class="mr-5 cursor-pointer position-relative" :class="{'choosedColor': check(sub,subItem,item)}">
                                    <div v-if="subItem.type === 'year'">
                                      {{sub.name}}
                                      <el-date-picker
                                        class="height-2"
                                        v-model="sub.value"
                                        type="year"
                                        :clearable="false"
                                        value-format="yyyy"
                                        @change="choose(sub,subItem,item)"
                                        prefix-icon="el-icon-arrow-down">
                                      </el-date-picker>
                                    </div>
                                    <div v-else-if="subItem.type === 'freeAverage'">
                                      <span class="mr-5">{{sub.label}}</span>
                                      <span :class="{'choosedColor': choosedAverage.type === 3}">{{sub.name}}</span>
                                      <el-date-picker
                                        class="width-4 height-2"
                                        v-model="sub.value"
                                        type="month"
                                        :clearable="false"
                                        value-format="yyyy年MM月"
                                        @change="choose(sub,subItem,item)"
                                        prefix-icon="el-icon-arrow-down">
                                      </el-date-picker>
                                    </div>
                                    <div v-else @click.stop="choose(sub,subItem,item)">
                                      {{sub.name}}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </transition>
                    </div>
                  </el-form>
                  <p class="fr" style="margin-top: 10px"><span style="margin-right:5px">仅通过认证</span><el-checkbox v-model="checked"></el-checkbox></p>
                </div>
                <div class="both"></div>
                <div>
                  <el-row>
                    <el-col :span="20">
                      <div style="height: 70px;padding: 15px;">
                        <input type="text" name="" placeholder="请输入医院" class="input_h"/><button type="button" class="s_button">搜索</button>
                      </div>
                    </el-col>
                    <el-col :span="4" class="s_j"><span class="vis1">升序</span><span class="ml-5">降序</span></el-col>
                  </el-row>
                </div>
              </div>
              <div style="width: 100%;clear: both;height: 620px;overflow-y:scroll;">
                <el-row v-for="(hospital,index) in hospitals[currentHospital]">
                  <el-col :span="8">
                    <el-row>
                      <input class="item-select" name="select" type="checkbox"/>
                      <img src="~static/assets/img/first.png" class="ml-5" alt="" v-if="index==0">
                      <img src="~static/assets/img/second.png" class="ml-5" alt="" v-if="index==1">
                      <img src="~static/assets/img/three.png" class="ml-5" alt="" v-if="index==2">
                      <span class="ml-8" v-if="index > 2">{{index + 1}}</span>
                      <span class="ml-5">{{hospital.name}}</span>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="20" class="lls lls_a"><el-progress :text-inside="true" :stroke-width="18" :percentage="hospital.length" class="winsr"></el-progress></el-col>
                      <el-col :span="4" class="tr">{{hospital.num}}</el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="4">
                    <el-row>
                      <el-col :span="12" class="ta_pr"><button type="button" class="bts" @click="send(scope)">鼓励</button></el-col>
                      <el-col :span="12" class="ta_pl"><button type="button" class="bts_r" @click="send(scope)">督导</button></el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row style="height: 60px;padding: 15px;margin-top: 15px;border:1px solid #ddd;-moz-box-shadow: 0 0 2px 2px #E4E7ED;
box-shadow: 0 0 2px 2px #E4E7ED;">
                  <el-col :span="20">
                    <label @click="checks(true)" style="color: #A4A4A4;font-size: 20px;">
                      <input id="selelct-all" type="checkbox" style="margin-right: 5px;">全选
                    </label>
                  </el-col>
                  <el-col :span="4">
                    <el-row>
                      <el-col :span="12" class="ta_pr"><button type="button" :class="checks>0 ? 'bts' : 'bts_h'" @click="sends(scope)">鼓励</button></el-col>
                      <el-col :span="12" class="ta_pl"><button type="button" :class="checks>0 ? 'bts' : 'bts_h'" @click="sends(scope)">督导</button></el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-main>
        </div>
      </el-container>

      <el-dialog
        class="foot-center"
        :visible.sync="showDialog"
        width="360px">
        <div class="text-center">
          <img src="~static/assets/img/supervision/fs.png" width="206" height="101" alt="">
          <div class="mt-15 text-16">
            {{dialogText}}
          </div>
        </div>
        <span slot="footer">
          <el-button @click="showDialog = false" type="info" round>取 消</el-button>
          <el-button type="primary" @click="confirmSend" round>确 认</el-button>
        </span>
      </el-dialog>
      <el-dialog
        class="foot-center"
        :visible.sync="afterSend"
        width="360px">
        <div class="text-center">
          <img src="~static/assets/img/supervision/sb.png" class="my-20" width="48" height="38" alt="">
          <div class="mt-15 text-16">
            {{dialogSend}}
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import Head from '@/components/Bg'
import LeftTop from '@/components/Left'
export default {
  data () {
    return {
      showDialog: false,
      afterSend: false,
      checked: true,
      nowIndex: 0,
      showAverage: false,
      checks: 0,
      dialogSend: '邮件发送成功',
      details: [
        {name: '查看省排名详情', t: 1},
        {name: '查看市排名详情', t: 2},
        {name: '查看医院排名详情', t: 3}
      ],
      form: {
        region: '',
        date: '',
        value5: ''
      },
      head: {
        platform: '江苏省胸痛中心质控管理平台',
        analysis: 'STEMI患者症状到首次接触治疗时间',
        name: '刘冰冰 ',
        methods: 'greet'
      },
      cs: [
        {name: '账户资料', t: 1},
        {name: '安全设置', t: 2}
      ],
      centerDialogVisible: false,
      temp1: 1,
      user: '543759843@qq.com',
      averages: [
        {
          type: 1,
          content: [
            {
              title: '年份',
              type: 'year',
              subs: [
                {
                  name: '请选择',
                  value: ''
                }
              ]
            },
            {
              title: '年平均',
              type: 'range',
              subs: [
                {
                  name: '整年',
                  value: 'all'
                }
              ]
            },
            {
              title: '半年平均',
              type: 'range',
              subs: [
                {
                  name: '上半年',
                  value: 'firstHalf'
                },
                {
                  name: '下半年',
                  value: 'secondHalf'
                }
              ]
            },
            {
              title: '季度平均',
              type: 'range',
              subs: [
                {
                  name: '一季度',
                  value: 'quarterOne'
                },
                {
                  name: '二季度',
                  value: 'quarterTwo'
                },
                {
                  name: '三季度',
                  value: 'quarterThree'
                },
                {
                  name: '四季度',
                  value: 'quarterFour'
                }
              ]
            },
            {
              title: '月平均',
              type: 'range',
              subs: [
                {
                  name: '1月',
                  value: 'jan'
                },
                {
                  name: '2月',
                  value: 'feb'
                },
                {
                  name: '3月',
                  value: 'mar'
                },
                {
                  name: '4月',
                  value: 'apr'
                },
                {
                  name: '5月',
                  value: 'may'
                },
                {
                  name: '6月',
                  value: 'jun'
                },
                {
                  name: '7月',
                  value: 'jul'
                },
                {
                  name: '8月',
                  value: 'aug'
                },
                {
                  name: '9月',
                  value: 'sep'
                },
                {
                  name: '10月',
                  value: 'oct'
                },
                {
                  name: '11月',
                  value: 'nov'
                },
                {
                  name: '12月',
                  value: 'Dec'
                }
              ]
            }
          ],
          choosedValue: []
        },
        {
          type: 2,
          content: [
            {
              title: '累计平均',
              type: 'sum',
              subs: [
                {
                  name: '累计至今',
                  value: 'now'
                }
              ]
            }
          ],
          choosedValue: []
        },
        {
          type: 3,
          content: [
            {
              title: '自由平均',
              type: 'freeAverage',
              subs: [
                {
                  label: '起始',
                  name: '请选择',
                  value: ''
                },
                {
                  label: '至',
                  name: '请选择',
                  value: ''
                }
              ]
            }
          ],
          choosedValue: []
        }
      ],
      choosedAverage: {},
      hospitals: [
        [{name: "上海交通大学医学院附属苏州九龙医院", length: 80, num: 80},{name:"南京市六合区人民医院", length: 75, num: 75},{name:"江苏省无锡市惠山区中医医院", length: 72, num: 72},{name:"苏州大学附属第二医院", length: 69, num: 69},{name:"苏州高新区人民医院", length: 65, num: 65},{name:"武进人民医院", length: 63, num: 63},{name:"中国人民解放军第101医院", length: 60, num: 60},{name:"苏州大学附属第一医院", length: 57, num: 57},{name:"苏州工业园区星海医院", length: 55, num: 55},{name:"盐城市大丰人民医院", length: 53, num: 53},{name:"苏州市中西医结合医院", length: 50, num: 50},{name:"南京同仁医院", length: 50, num: 50},{name:"常州市第二人民医院", length: 49, num: 49},{name:"徐州市第一人民医院", length: 43, num: 43},{name:"常州市中医医院", length: 35, num: 35},{name:"盐城市中医院", length: 33, num: 33},{name:"徐州医科大学附属医院", length: 30, num: 30},{name:"宜兴市人民医院", length: 28, num: 28},{name:"泰州市第三人民医院", length: 25, num: 25},{name:"响水县人民医院", length: 23, num: 23},{name:"无锡市第二中医医院", length: 20, num: 20},{name:"无锡市人民医院", length: 19, num: 19},{name:"南京市浦口区中心医院", length: 15, num: 15},{name:"南京市中心医院", length: 14, num: 15},{name:"南京市高淳人民医院", length: 13, num: 13},{name:"南京市浦口区中医医院", length: 12, num: 12},{name:"张家港市第一人民医院", length: 11, num: 11},{name:"苏州市立医院（北区)", length: 10, num: 10},{name:"昆山市锦溪人民医院", length: 9, num: 9},{name:"苏州市立医院", length: 8, num: 8},{name:"苏州科技城医院", length: 7, num: 7},{name:"张家港市第六人民医院", length: 6, num: 6},{name:"昆山市千灯人民医院", length: 5, num: 5},{name:"昆山市中医医院", length: 4, num: 4},{name:"太仓市第一人民医院", length: 3, num: 3},{name:"苏州工业园区星海医院", length: 2, num: 2},{name:"昆山市花桥人民医院", length: 1, num: 1},{name:"苏州市立医院（北区)", length: 0, num: 0},{name:"昆山市锦溪人民医院", length: 0, num: 0},{name:"苏州市立医院", length: 0, num: 0},{name:"南京明基医院", length: 0, num: 0},{name:"中国人民解放军第四五四医院", length: 0, num: 0},{name:"南京市溧水区中医院", length: 0, num: 0},{name:"昆山市第三人民医院", length: 0, num: 0},{name:"张家港市第五人民医院", length: 0, num: 0},{name:"江苏盛泽医院", length: 0, num: 0},{name:"苏州市相城区第三人民医院", length: 0, num: 0},{name:"苏州高新区人民医院", length: 0, num: 0},{name:"常熟市支塘人民医院", length: 0, num: 0},{name:"昆山市第六人民医院", length: 0, num: 0},{name:"常熟市辛庄中心卫生院", length: 0, num: 0},{name:"苏州工业园区星湖医院", length: 0, num: 0},{name:"张家港市第一人民医院", length: 0, num: 0},{name:"苏州明基医院", length: 0, num: 0},{name:"苏州市相城区第二人民医院", length: 0, num: 0}],
        [{name:"太仓市中医医院", length: 80, num: 80},{name:"张家港澳洋医院", length: 75, num: 75},{name:"昆山市第二人民医院", length: 72, num: 72},{name:"张家港市第三人民医院", length: 69, num: 69},{name:"苏州市中西医结合医院", length: 65, num: 65},{name:"昆山市第一人民医院", length: 63, num: 63},{name:"苏州大学附属第一医院", length: 60, num: 60},{name:"苏州市相城区漕湖人民医院", length: 57, num: 57},{name:"常熟市第一人民医院", length: 55, num: 55},{name:"苏州广济医院  ", length: 53, num: 53},{name:"苏州市吴中区甪直人民医院", length: 50, num: 50},{name:"上海交通大学医学院附属苏州九龙医院 ", length: 50, num: 50},{name:"苏州市木渎人民医院", length: 49, num: 49},{name:"昆山市第三人民医院", length: 43, num: 43},{name:"张家港市第五人民医院", length: 35, num: 35},{name:"江苏盛泽医院  ", length: 33, num: 33},{name:"苏州市相城区第三人民医院", length: 30, num: 30},{name:"苏州高新区人民医院", length: 28, num: 28},{name:"常熟市支塘人民医院", length: 25, num: 25},{name:"昆山市第六人民医院", length: 23, num: 23},{name:"常熟市辛庄中心卫生院", length: 20, num: 20},{name:"苏州工业园区星湖医院", length: 19, num: 19},{name:"张家港市第一人民医院", length: 15, num: 15},{name:"苏州明基医院 ", length: 14, num: 15},{name:"苏州市相城区第二人民医院", length: 13, num: 13},{name:"苏州金阊医院", length: 12, num: 12},{name:"苏州大学附属第二医院", length: 11, num: 11},{name:"张家港市中医医院", length: 10, num: 10},{name:"苏州市相城人民医院", length: 9, num: 9},{name:"昆山第四人民医院", length: 8, num: 8},{name:"苏州市吴江区第一人民医院", length: 7, num: 7},{name:"苏州科技城医院", length: 6, num: 6},{name:"张家港市第六人民医院", length: 5, num: 5},{name:"昆山市千灯人民医院", length: 4, num: 4},{name:"昆山市中医医院", length: 3, num: 3},{name:"太仓市第一人民医院", length: 2, num: 2},{name:"苏州工业园区星海医院", length: 1, num: 1},{name:"昆山市花桥人民医院", length: 0, num: 0},{name:"苏州市立医院（北区)", length: 0, num: 0},{name:"昆山市锦溪人民医院", length: 0, num: 0},{name:"苏州市立医院", length: 0, num: 0}],
        [{name:"无锡市惠山区人民医院", length: 80, num: 80},{name:"江阴市中医院", length: 75, num: 75},{name:"无锡市锡山人民医院", length: 72, num: 72},{name:"中国人民解放军第101医院", length: 69, num: 69},{name:"宜兴市第二人民医院", length: 65, num: 65},{name:"江苏省无锡市惠山区中医医院", length: 63, num: 63},{name:"无锡市第二人民医院", length: 60, num: 60},{name:"无锡市第三人民医院", length: 60, num: 60},{name:"宜兴市人民医院", length: 55, num: 55},{name:"江南大学附属医院", length: 53, num: 53},{name:"无锡市锡山区羊尖卫生院", length: 50, num: 50},{name:"江阴市人民医院", length: 50, num: 50},{name:"无锡市第二中医医院", length: 49, num: 49},{name:"无锡市人民医院", length: 43, num: 43},{name:"无锡市惠山区第二人民医院", length: 35, num: 35},{name:"宜兴市中医医院", length: 33, num: 33},{name:"江苏省江原医院", length: 30, num: 30},{name:"无锡市中医医院", length: 28, num: 28}],
        [{name:"南京市六合区人民医院", length: 80, num: 80},{name:"南京鼓楼医院", length: 75, num: 75},{name:"南京同仁医院", length: 72, num: 72},{name:"江苏省南京市栖霞区医院", length: 69, num: 96},{name:"溧水区人民医院", length: 65, num: 65},{name:"南京市浦口医院", length: 63, num: 63},{name:"南京江北人民医院", length: 60, num: 60},{name:"南京医科大学第二附属医院", length: 57, num: 57},{name:"南京江北人民医院", length: 55, num: 55},{name:"南京市浦口医院", length: 53, num: 53},{name:"南京医科大学第二附属医院", length: 50, num: 50},{name:"江苏省中医院", length: 50, num: 50},{name:"南京医科大学附属逸夫医院", length: 49, num: 49},{name:"南京市江宁医院", length: 43, num: 43},{name:"东南大学附属中大医院", length: 35, num: 35},{name:"南京市浦口区中心医院", length: 33, num: 33},{name:"南京市中心医院", length: 30, num: 30},{name:"南京市高淳人民医院", length: 28, num: 28},{name:"南京市浦口区中医医院", length: 25, num: 25},{name:"南京明基医院", length: 24, num: 24},{name:"中国人民解放军第四五四医院", length: 23, num: 23},{name:"南京市溧水区中医院", length: 20, num: 20}]
      ],
      currentHospital: 0,
      titles: ["7日建档率", "30日归档率", "基本项完整度", "所有数据项完整度", "积累填报病例数", "本月填报病例数", "本周填报病例数", "今天填报病例数", "STEMI患者症状到首次医疗接触时间", "首次医疗接触至首份心电图时间", "ECG远程传输比例", "首次医疗接触至双重抗血小板治疗时间", "再灌注比例", "1A 非PCI医院停留时间（DIDO）", "1B 直达导管室比率、绕行急诊及CCU", "1C D2B时间", "1D 首次医疗接触至导丝通过时间", "院内死亡率（心源性及非心源性）", "出院带药符合指南推荐", "质量改进会、上传会议记录和照片", "数据填报量"]
    }
  },
  mounted () {
    var that = this

    let type = parseInt(this.$route.query.type)
    this.head.analysis = this.titles[type]

    $('#selelct-all').click(function () {
      $('.item-select').prop('checked', $('#selelct-all').prop('checked'))
      if($('#selelct-all').prop('checked')){
        that.checks = $('.item-select').length
      } else {
        that.checks = 0
      }
    })
    $('.item-select').click(function () {
      if($(this).prop('checked')){
        that.checks ++
      } else {
        that.checks --
      }
    })
    $('.switch-list').click(function () {
      that.currentHospital = $(this).data('index')
    })

  },
  methods: {
    choose (sub, fparent, sparent) {
      if (fparent.type === 'year' || fparent.type === 'freeAverage') {
        sub.name = sub.value
      }
      this.choosedAverage = sparent
      let index = _.findIndex(sparent.choosedValue, {type: fparent.type})
      if (index === -1) {
        let obj = {
          type: fparent.type,
          value: sub.value,
          name: sub.name
        }
        sparent.choosedValue.push(obj)
      } else {
        sparent.choosedValue[index].value = sub.value
        sparent.choosedValue[index].name = sub.name
      }
      // 清空未选择项
      this.averages.forEach(item => {
        if (item.type !== this.choosedAverage.type) {
          item.choosedValue = []
          item.content.forEach(subItem => {
            if (subItem.type === 'year' || subItem.type === 'freeAverage') {
              subItem.subs.forEach(sub => {
                sub.value = ''
              })
            }
          })
        }
      })
    },
    check (sub, fparent, sparent) {
      if (fparent.type !== 'freeAverage') {
        if (_.findIndex(sparent.choosedValue, {type: fparent.type}) > -1) {
          return sparent.choosedValue[_.findIndex(sparent.choosedValue, {type: fparent.type})].value === sub.value
        }
        return false
      }
    },
    greet: function () {
      this.centerDialogVisible = true
    },
    sorts (event, index, t) {
      this.nowIndex = index
      this.temp1 = t
    },
    removeItem: function (that) {
      $(that).parent().remove()
    },
    send (data) {
      this.dialogText = '发送邮件到这家医院'
      this.showDialog = true
    },
    sends (data) {
      if(this.checks <= 0){
        return false
      }
      this.dialogText = '批量发送邮件到医院'
      this.showDialog = true
    },
    confirmSend () {
      this.showDialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
        this.afterSend = true
      }, 1000)
    }
  },
  computed: {
    'choosedText' () {
      let result = ''
      if (!this.choosedAverage.type) {
        result = '请选择'
      } else {
        if (this.choosedAverage.choosedValue[0].type !== 'year') {
          _.reverse(this.choosedAverage.choosedValue)
        }
        if (this.choosedAverage.type === 3) {
          this.choosedAverage.content[0].subs.forEach(item => {
            result += item.label + ' ' + item.value + ' '
          })
        } else {
          this.choosedAverage.choosedValue.forEach(item => {
            result += item.name + '  '
          })
        }
      }
      return result
    }
  },
  components: {
    Head,
    LeftTop
  }
}
</script>

<style scoped>
  body{
    margin: 0;
    padding: 0;
  }
  .sub-card{
    position: absolute;
    z-index: 100;
    top: 80px;
    height: 392px;
    width: 480px;
    right: 0;
    line-height: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
  }
  .sub-tip{
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 0px solid white;
    transition: border-bottom-width 120ms ease-out;
  }
  .win{
    background: -webkit-gradient(linear, left top, right top, from(#D53BDE) , to(#3156DA));
    background: linear-gradient(to right, #D53BDE , #3156DA);
    border-radius: 13px;
  }
  .rank_color{
    background: -webkit-gradient(linear, left top, right top, from(#F4B44E) , to(#FC4B8E));
    background: linear-gradient(to right, #F4B44E , #FC4B8E);
    border-radius: 13px;
  }
  .win_img{
    width: 35px;
    margin-top: -13px;
    margin-left: 10px;
  }
  .win_color{
    color:#D53BDE;
  }
  .right_bgcolor{
    padding: 20px 20px 20px 0;
    background-color: #f2f2f2;
  }
  .bgcolor{
    background-color: #fff;
  }
  .wins{
    border-radius: 13px;
    background: #FA647F;
  }
  .ml-5{
    margin-left: 5px;
  }
  .ml-10{
    margin-left: 10px;
  }
  .vis{
    color: #0F86FC;
    font-size: 22px;
  }
  .vis1{
    color: #0F86FC;
  }
  .w-20{
    width: 20px;
  }
  .input_h{
    width: 300px;
    margin-right: 10px;
    padding-left: 15px;
    border: 1px solid #E6E6E6;
    background: #E6E6E6;
    line-height: 40px;
    border-radius: 10px;
  }
  .s_button{
    color: #0F86FC;
    width: 80px;
    line-height: 40px;
    font-size: 16px;
    border-radius: 30px;
    border: 0;
    background: #E6E6E6;
  }
  .bts{
    background: #ffffff;
    color: #336CDD;
    border: 1px solid #336CDD;
    width: 65px;
    line-height: 28px;
    border-radius: 14px;
  }
  .bts_r{
    color: #E54E62;
    background: #ffffff;
    border: 1px solid #E54E62;
    width: 65px;
    line-height: 28px;
    border-radius: 14px;
  }
  .ml-8{
    margin-left: 8px;
  }
  .ml-7{
    margin-left: 7px;
  }
  .ml-6{
    margin-left: 1px;
  }
  .bts_h{
    background: #D1D1D1;
    color: #ffffff;
    border: 1px solid #D1D1D1;
    width: 65px;
    line-height: 28px;
    border-radius: 14px;
  }
  .s_j{
    text-align: right;
    padding-left: 10px;
    line-height: 40px;
  }
  .lls_a{
    height: 40px;
  }
  .ta_pl{
    text-align: left;
    padding-left: 10px;
  }
  .ta_pr{
    text-align: right;
    padding-right: 10px;
  }
  .choosedColor{
    color: #1186FC;
  }
  .item-select{
    vertical-align: middle;
  }
</style>
